<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

        <div class="poolInfo">
            
            <div class="poolContador">
                <p:commandLink action="#{poolSessionBean.verPrincipal}" process="@this" ajax="false" immediate="true" >
                    <ui:include src="../pool/countDownPool.xhtml" />
                </p:commandLink>
            </div>

            <div style="position: relative; width: 650px; float: left; ">

               <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                       <td width="640" height="25" style="font-size: 18px;" valign="middle">
                           
                           <p:commandLink action="#{poolSessionBean.verPrincipal}" process="@this" ajax="false" immediate="true" >
                               <h:outputText value="#{poolSessionBean.p.tituloPool}" style="font-weight: bold;" />
                               <p:graphicImage value="../resources/imagenes/masinfo.jpg" width="120" height="22" />                               
                           </p:commandLink>
                   
                       </td>
                       
                       <td width="100" rowspan="3">
                           <p:commandLink  id="btnContacoPool"
                                           action="#{poolSessionBean.verContactoPool}"
                                           process="@this"
                                           ajax="false" >
                               <p:graphicImage value="../resources/imagenes/carroVerde.png" width="60" height="60" />
                               
                               <h:outputText value="Comprar"/>
                           </p:commandLink>
                       </td>

                       <td width="100"  rowspan="3">
                           <div class="countDownBoton">
                               <p:commandLink action="../pool/basesCondiciones.xhtml" process="@this" ajax="false" >
                                   <p:graphicImage value="../resources/imagenes/info32.png" />
                                   <br/>
                                   <h:outputText value="Términos y Condiciones"/>
                               </p:commandLink>
                           </div>
                       </td>
                   </tr>

                   <tr>
                       <td width="640" height="35" align="center" style="font-weight: bold;font-size: 25px;">

                           <p:idleMonitor timeout="5000" >
                               <p:ajax event="idle" update="cantDisponible, porcentajeVenta" />
                           </p:idleMonitor>

                           <p:commandLink id="cantDisponible" action="#{poolSessionBean.verPrincipal}"
                                          process="@this" ajax="false" immediate="true"  >

                               <h:outputText value="#{poolSessionBean.p.cantDisponiblePool} Unidades disponibles"
                                             style="margin: 10px;"/>
                               
                               <p:effect type="pulsate" event="load" delay="1">
                                    <f:param name="mode" value="'show'" />
                               </p:effect>

                           </p:commandLink>

                       </td>
                   </tr>

                   <tr>
                       <td width="640px" height="19" align="center" >
                           
                           <p:progressBar id="porcentajeVenta"
                                  value="#{poolSessionBean.porcentajeFinalizadoPool}" labelTemplate="{value}% Vendido"
                                  displayOnly="true" style="height: 15px; width: 320px; font-size: 10px;" >

                               <p:effect type="shake" event="load" delay="1">
                                    <f:param name="mode" value="'show'" />
                               </p:effect>

                           </p:progressBar>
                       </td>

                   </tr>

               </table>                
            </div>            
        </div> 
</ui:composition>
